<template>
  <div
    class="data-report-container animate__faster animate__animated animate__fadeIn"
    v-loading="dataLoading"
  >
    <div class="data-report-body">
      <TableView>
        <template slot-scope="{ width, height }">
          <a-table
            :data-source="tableData"
            rowKey="id"
            :scroll="{ x: width, y: height }"
            :columns="tableColumns"
            :pagination="pager"
            @change="paginationChange"
          >
            <template
              v-for="col in tableColumns"
              :slot="col.scopedSlots.customRender"
              slot-scope="text, record"
            >
              <div
                v-for="(item, index) in record[col.scopedSlots.customRender]"
                :key="index"
                class="table-row-text"
              >
                {{ item }}
              </div>
            </template>
            <template slot="operation" slot-scope="text, record">
              <a-button @click="handelDetail(record)" type="primary">
                详情
              </a-button>
            </template>
          </a-table>
        </template>
      </TableView>
    </div>
    <!-- 弹框 -->
    <DetailsInfoModel
      :visible.sync="detailModalVisible"
      :formData="formData"
    ></DetailsInfoModel>
  </div>
</template>

<script>
import { getField } from "@/api/wisdom-beam/cement_common";
import { getMaterialTableData } from "@/api/wisdom-beam/productionManage-app";
import { _getUUID } from "@/utils";
import paginationMixins from "@/mixins/pagination";
import TableView from "@/components/tableView";
import DetailsInfoModel from "./components/DetailsInfoModel";
export default {
  mixins: [paginationMixins],
  components: {
    TableView,
    DetailsInfoModel,
  },
  data() {
    return {
      dataLoading: true,
      tableColumns: [],
      tableData: [],
      detailModalVisible: false,
      formData: {},
    };
  },
  mounted() {
    // this.getData();
  },
  methods: {
    handelDetail(record) {
      this.detailModalVisible = true;
      this.formData = record;
    },
    //监听分页
    paginationChange(pagination) {
      let { current, pageSize } = pagination;
      this.pager.pageSize = pageSize;
      this.pager.page = current;
      this.getTableData();
    },
    //查询相关数据
    getData() {
      this.dataLoading = true;
      Promise.all([this.getFieldData(), this.getTableData()])
        .then((result) => {
          this.tableColumns = [];
          let [columns, table] = result;
          columns.forEach((col) => {
            if (this.checkHasData(col.dataIndex, table)) {
              this.tableColumns.push(col);
            }
          });
          this.tableColumns.push({
            title: "操作",
            dataIndex: "operation",
            width: "100px",
            fixed: "right",
            scopedSlots: { customRender: "operation" },
          });
        })
        .finally((_) => {
          this.dataLoading = false;
        });
    },

    checkHasData(key = "", data = []) {
      return data
        .map((v) => v[key])
        .flat()
        .some((v) => v != 0);
    },

    //查询字段列表
    getFieldData() {
      this.dataLoading = true;
      this.tableColumns = [];
      return new Promise((resolve, reject) => {
        let {
          conditionsData: { block },
        } = this.$parent.$data;
        getField({
          equCode: block,
          flag: "0",
        })
          .then((res) => {
            let cdata = [
              {
                title: "标段名称",
                dataIndex: "secName",
                key: _getUUID(32, 32),
                width: 100,
                scopedSlots: { customRender: "secName" },
              },
              {
                title: "拌和站名称",
                dataIndex: "equName",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "equName" },
              },
              {
                title: "生产时间",
                dataIndex: "dischargeTime",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "dischargeTime" },
              },
              {
                title: "工程名称",
                dataIndex: "projectName",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "projectName" },
              },
              {
                title: "浇筑部位",
                dataIndex: "placePart",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "placePart" },
              },
              {
                title: "强度等级",
                dataIndex: "strengthGrade",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "strengthGrade" },
              },
              {
                title: "搅拌时间(s)",
                dataIndex: "stirTime",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "stirTime" },
              },
              {
                title: "方量(m³)",
                dataIndex: "volume",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "volume" },
              },
              {
                title: "类型",
                dataIndex: "typeName",
                key: _getUUID(32, 32),
                width: 150,
                scopedSlots: { customRender: "typeName" },
              },
            ];
            res.data.result.forEach((item) => {
              cdata.push({
                title: item.equFieldName,
                dataIndex: item.equFieldDtu,
                key: _getUUID(32, 32),
                width: 100,
                scopedSlots: { customRender: item.equFieldDtu },
              });
            });
            resolve(cdata);
          })
          .catch((_) => {
            this.tableColumns = [];
            reject();
          });
      });
    },

    //查询表格数据
    getTableData() {
      return new Promise((resolve, reject) => {
        let { page, pageSize } = this.pager;
        let {
          conditionsData: { block, engineerName, mixin, placePart, strength },
          defaultTime,
        } = this.$parent.$data;
        getMaterialTableData({
          secCode: block,
          equCode: mixin,
          startTime: defaultTime[0],
          endTime: defaultTime[1],
          projectName: engineerName,
          strengthGrade: strength,
          placePart,
          page,
          pageSize,
        })
          .then((res) => {
            this.pager.total = res.data.result.data.total;
            this.tableData = res.data.result.data.records;
            if (this.$parent.$data.defaultTime?.length == 0) {
              this.$parent.$data.defaultTime = [
                res.data.result.startTime,
                res.data.result.endTime,
              ];
            }
            resolve(this.tableData);
          })
          .catch((_) => {
            this.tableData = [];
            reject();
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.data-report-container {
  width: 100%;
  height: 100%;
  padding-right: 10px;
  .custom-scrollbar();
  .data-report-body {
    height: 100%;
    background: #fff;
  }
  .table-row-text {
    padding: 2px 0;
  }
}
</style>
